<template>
  <section>
    <van-nav-bar title="修改订单" fixed @click-left="onClickLeft" @click-right="onClickRight">
      <van-icon name="arrow-left" slot="left" color="#333" size="0.6rem" />
      <van-icon
        :name="require('@/assets/img/computer.png')"
        slot="right"
        color="#333"
        size="0.6rem"
      />
    </van-nav-bar>
    <div class="container">
      <div class="goods-items" v-if="orderData">
        <div
          class="goods-item"
          v-for="(item,index) in orderData.kaGoodsTypeList"
          :key="index"
          @click="handelAddGood(index)"
        >
          <img
            :src="`${item.KaGoodPicture ? `https://${item.KaGoodPicture}`: require('@/assets/img/defaultimg.png')}`"
            alt
            class="goods-img"
          />
          <div class="goods-info">
            <div class="good-title">
              <span>{{item.KaGoodName}}</span>
              <van-icon
                @click.stop="handelDelete(index)"
                :name="require('@/assets/img/delete.png')"
                color="#333"
                size="0.6rem"
              />
            </div>
            <div
              class="good-desc"
            >
            总重量：{{(Number(item.unitWeight) * Number(item.KaQuantity)).toFixed(2)}}kg 总体积{{(Number(item.unitVolumn) * Number(item.KaQuantity)).toFixed(2)}}m³</div>
            <div class="good-num" @click.stop>
              <span>{{item.Fragile|fragileFilter}} {{item.Pressurable|presurableFilter}}</span>
              <van-stepper
                @change="changeQuantity(index)"
                v-model="item.KaQuantity"
                integer
                min="1"
                max="999999"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="continue" @click="handelAddGood('new')">
        <van-icon :name="require('@/assets/img/continue.png')" color="#333" size="0.6rem" />
        <span class="continue-text">继续添加</span>
      </div>
      <!-- <van-field
        v-model="orderData.modifyRemark"
        required
        rows="1"
        autosize
        label="修改备注"
        type="textarea"
        maxlength="50"
        placeholder="请输入"
        show-word-limit
        input-align="right"
      /> -->
    </div>
    <div class="footer">
      <div class="footer-left">
        <p class="footer-num">总件数 {{kaQuantityNum}}件</p>
        <p class="footer-desc">
          <span>总重量{{kaWeightKgNum}}kg</span>
          <span>总体积{{kaVolumnNum}}m³</span>
        </p>
      </div>
      <div class="footer-right" :class="kaQuantityNum==0?'none':''" @click="handelSave">保存</div>
    </div>
  </section>
</template>

<script>
import { orderSelect, orderChange } from "@/api/order";
export default {
  data() {
    return {
      value: 1,
      message: "",
      orderId: "",
      orderData: {
        // modifyRemark: ""
      },
      isSelect: false
    };
  },
  beforeRouteEnter(to, from, next) {
    let isSelect = false;

    if (from.path === "/select/goods" || from.path == "/") {
      isSelect = true;
    }
    next(vm => {
      vm.isSelect = isSelect;
    });
  },
  mounted() {
    this.orderId = this.$route.query.orderId;
    if (this.orderId) {
      setTimeout(() => {
        this.getData();
      }, 20);
    }
  },
  computed: {
    kaQuantityNum() {
      let num = 0;

      if (this.orderData && this.orderData.kaGoodsTypeList) {
        this.orderData.kaGoodsTypeList.map(item => {
          num += Number(item.KaQuantity);
        });
      }
      return num.toFixed(2);
    },
    kaWeightKgNum() {
      let num = 0;

      if (this.orderData && this.orderData.kaGoodsTypeList) {
        this.orderData.kaGoodsTypeList.map(item => {
          num += Number(item.unitWeight) * item.KaQuantity;
        });
      }
      return num.toFixed(2);
    },
    kaVolumnNum() {
      let num = 0;

      if (this.orderData && this.orderData.kaGoodsTypeList) {
        this.orderData.kaGoodsTypeList.map(item => {
          num += Number(item.unitVolumn) * item.KaQuantity;
        });
      }
      return num.toFixed(2);
    }
  },
  watch: {},
  methods: {
    getData() {
      orderSelect(this.orderId).then(res => {
        if (res.code == 200) {
          if (!this.isSelect) {
            this.orderData = res.data;
            sessionStorage.setItem(
              "bd-h5-selectgood",
              JSON.stringify(res.data)
            );
          } else {
            let data = sessionStorage.getItem("bd-h5-selectgood");

            this.orderData = data ? JSON.parse(data) : {};
          }
          // if (!this.orderData.modifyRemark) {
          //   this.orderData.modifyRemark = "";
          // }

          this.orderData.tiHuoPrice = this.orderData.kaArPickUp
            ? this.orderData.kaArPickUp
            : 0;
          this.orderData.faHuoPrice = this.orderData.kaArSend
            ? this.orderData.kaArSend
            : 0;
          this.orderData.ganXianPrice = this.orderData.kaArFreight
            ? this.orderData.kaArFreight
            : 0;

          this.orderData.pushPlatform = this.orderData.pushPlatformPc;
          this.orderData.kaGoodsTypeList.map(item => {
            delete item.kaWeightKg;
            delete item.kaVolumn;
            delete item.quantity;
            delete item.pressurable;
            delete item.fragile;
            delete item.kaGoodPicture;
            item.userContractItemId =  null
            item.userContractLineGoodsId = null
            item.userGoodsSource = 0
            console.log(item,item.KaWeightKg , item.KaQuantity)
            console.log(item.KaVolume , item.KaQuantity)

            item.unitWeight = item.KaWeightKg / item.KaQuantity;
            item.unitVolumn = item.KaVolume / item.KaQuantity;
          });
        }
      });
    },
    handelSave() {
      //0待提货 1-已提货 2-已承运 4-出运 7-到达站点 10派送中 13-签收(妥投) 14 异常签收  15 拒签 18回执已取
      if ([4, 7, 13, 14, 15, 18].includes(this.orderData.orderStatusBack)) {
        this.$toast.fail("当前订单状态不能修改货量");
        return;
      }
      if (this.orderData.modifyStatus == 1) {
        this.$toast.fail("该订单已在审核修改中");
        return;
      }

      // if (!this.orderData.modifyRemark) {
      //   this.$toast.fail("请填写修改订单备注");
      //   return;
      // }
      if (this.kaQuantityNum > 0) {
        this.orderData.peoplePrice = (
          Number(this.orderData.ganXianPrice) +
          Number(this.orderData.faHuoPrice) +
          Number(this.orderData.tiHuoPrice)
        ).toFixed(2);
        // this.orderData.kaGoodsTypeListForH5 = this.orderData.kaGoodsTypeList;
        this.orderData.kaOrderId = this.orderId;
        this.orderData.isAbnomal = 0;
        this.orderData.carrierFlag = 0; // 确认承运的标识
        this.orderData.kaGoodsTypeList.map(item => {
          item.KaWeightKg = item.unitWeight * item.KaQuantity;
          item.KaVolume = item.unitVolumn * item.KaQuantity;
        });
        this.orderData.userContractId =  this.$router.history.current.query.userContractId
        this.orderData.h5KaQuantity = Number(this.kaQuantityNum);
        this.orderData.h5KaVolume = Number(this.kaVolumnNum);
        this.orderData.h5KaWeightKg = Number(this.kaWeightKgNum);
        console.log(this.kaQuantityNum);
        console.log(this.kaWeightKgNum);
        console.log(this.kaVolumnNum);
        console.dir(JSON.stringify(this.orderData, null, 2));
        orderChange(this.orderData).then(res => {
          if (res.code == 200) {
            sessionStorage.removeItem("bd-h5-selectgood");
            this.$router.back();
          }
        });
        // if (this.orderData.modifyRemark.trim() != "") {
          
        // } else {
        //   this.$toast.fail("请填写修改订单备注");
        //   this.orderData.modifyRemark = "";
        // }

        //调用接口修改货物信息 成功后清楚sessionstore
      }
    },
    handelDelete(index) {
      this.orderData.kaGoodsTypeList.splice(index, 1);
      sessionStorage.setItem(
        "bd-h5-selectgood",
        JSON.stringify(this.orderData)
      );
    },
    handelAddGood(index) {
      sessionStorage.setItem(
        "bd-h5-selectgood",
        JSON.stringify(this.orderData)
      );
      this.$router.push({
        path: "/select/goods",
        query: {
          edit: index
        }
      });
    },
    onClickLeft() {
      sessionStorage.removeItem("bd-h5-selectgood");
      this.$router.back();
    },
    onClickRight() {
      let url = window.location.host;

      let index = url.indexOf("pre");

      if (index <= -1) {
        window.location.href = "https://ka.lecarlink.com/index.aspx";
      } else {
        window.location.href = "https://ka-pre.lecarlink.com/index.aspx";
      }
    },
    changeQuantity(index) {
      let kaGoodsTypeList = [];

      kaGoodsTypeList = this.orderData.kaGoodsTypeList;
      if (kaGoodsTypeList[index].KaQuantity <= 999999) {
        kaGoodsTypeList[index].KaVolume = parseFloat(
          kaGoodsTypeList[index].KaQuantity * kaGoodsTypeList[index].unitVolumn
        ).toFixed(2);
        kaGoodsTypeList[index].KaWeightKg =
          kaGoodsTypeList[index].KaQuantity * kaGoodsTypeList[index].unitWeight;
        kaGoodsTypeList[index].lastInputQuantity =
          kaGoodsTypeList[index].KaQuantity;
      } else {
        kaGoodsTypeList[index].KaQuantity = kaGoodsTypeList[index]
          .lastInputQuantity
          ? kaGoodsTypeList[index].lastInputQuantity
          : 999999;
      }
    }
  },
  components: {}
};
</script>

<style scoped lang='scss'>
.container {
  background: #f8f8f8;
  padding: 56px 15px 74px 15px;
  font-size: 16px;
  .goods-items {
    margin-bottom: 12px;
    .goods-item {
      background: #ffffff;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      padding: 10px;
      display: flex;
      .goods-img {
        flex: 0 0 84px;
        width: 84px;
        height: 84px;
        background: #ccc;
        margin-right: 10px;
        border-radius: 4px;
      }
      .goods-info {
        flex: 1 0 auto;
        display: flex;
        flex-flow: column;
        height: 84px;
        justify-content: space-around;
        overflow: visible;
        .good-title {
          display: flex;
          justify-content: space-between;
        }
        .good-desc {
          color: #999;
          font-size: 12px;
          overflow: hidden;
          overflow: hidden;
        }
        .good-num {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
  .continue {
    padding: 10px;
    background: #fdf3e4;
    border: 1px solid #f18d00;
    box-shadow: 0 2px 4px 0 rgba(118, 83, 9, 0.1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin-bottom: 10px;
    .continue-text {
      margin-left: 5px;
      color: #f18d00;
      font-size: 18px;
    }
  }
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  height: 60px;
  display: flex;
  justify-content: space-between;
  .footer-left {
    flex: 1 0 auto;
    padding: 10px 15px;
    .footer-num {
      font-size: 16px;
    }
    .footer-desc {
      font-size: 12px;
      color: #999;
    }
  }
  .footer-right {
    flex: 0 0 150px;
    height: 60px;
    line-height: 60px;
    background: #f18d00;
    font-size: 18px;
    text-align: center;
    color: #fff;
    &.none {
      background: #ccc;
    }
  }
}
</style>
